<template>
  <div>
    <v-chart-pie :options="option" style="height:25vh;width:100%" />
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/legend'
// import 'echarts/lib/component/tooltip'

export default {
  components: {
    'v-chart-pie': ECharts
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    data(val) {
      let titles = ['product']
      let source = []
      console.log(this.option)
      for(let i = 0; i < val.length; i++) {
        titles.push(val[i].title)

        source.push(
          {product: val[i].title, '2017年': val[i].val1, '2018年': val[i].val2, '2019年': val[i].val3}
        )
      }

      // this.option.dataset.dimensions = titles
      this.option.dataset.source = source
      console.log(this.option)
    }
  },
  created() {
    //
  },
  mounted() {
    let option = {
        legend: {
          right: 10,
          top: "5%",
          textStyle: {
            color: '#ffffff',
            fontSize: '.8rem'
          }
        },
        tooltip: {},
        dataset: {
            dimensions: ['product', '2017年', '2018年', '2019年'],
            source: [
                {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
            ]
        },
        xAxis: {
          type: 'category',
          axisLine: {  //这是x轴文字颜色
              lineStyle: {
                  color: "#fff"
              }
          },
          axisLabel: {
              show: true,
              textStyle: {
                  fontSize: '.8rem',
              }
          }
        },
        yAxis: {
          splitLine:{show:  false }, //去除网格线
          axisLine: {  //这是x轴文字颜色
              lineStyle: {
                  color: "#fff",
              },
          },
          axisLabel: {
              show: true,
              textStyle: {
                  fontSize: '.8rem',
              }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ],
        grid:{
          height: "60%",
          left: '12%'
        }
    };
    this.option = option
  },
  data() {
    return {
      option: {}
    }
  }
}
</script>
